<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<script type="text/javascript" src="../js/xadmin.js"></script>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../css/font.css">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
		<script src="../js/script.js"></script>
		<!-- favicon
		============================================ -->
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

		<!-- Google Fonts
		============================================ -->
		<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,900,700,700italic,300' rel='stylesheet' type='text/css'>

		<!-- Bootstrap CSS
		============================================ -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">

		<!-- nivo slider CSS
		============================================ -->
		<link rel="stylesheet" href="lib/nivo-slider/css/nivo-slider.css" type="text/css" />
		<link rel="stylesheet" href="lib/nivo-slider/css/preview.css" type="text/css" media="screen" />

		<!-- jquery-ui CSS
		============================================ -->
		<link rel="stylesheet" href="css/jquery-ui.css">

		<!-- meanmenu CSS
		============================================ -->
		<link rel="stylesheet" href="css/meanmenu.min.css">

		<!-- animate CSS
		============================================ -->
		<link rel="stylesheet" href="css/animate.css">

		<!-- style CSS
		============================================ -->
		<link rel="stylesheet" href="style.css">

		<!-- responsive CSS
		============================================ -->
		<link rel="stylesheet" href="css/responsive.css">
		<link rel="stylesheet" href="../css/table.css" />

		<!-- modernizr JS
		============================================ -->
		<script src="js/vendor/modernizr-2.8.3.min.js"></script>


	</head>
	<body style="background-color: #F2F2F2;">
		<!--Mainmenu Start-->
		<div class="mainmenu-area hidden-sm hidden-xs">
			<div id="sticker">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 col-md-12 hidden-sm">
							<div class="mainmenu" style="color: #007DDB;">
								<nav>
									<ul id="nav">
										<li><a style="font-size: 20px;color: #009688;" href="home.html">二手车交易平台</a></li>
										<li style="margin-left: 120px;"></li>
										<li><a class="lfont" href="home.html">买车</a></li>
										<li><a href="sell.html">卖车</a></li>
										<li><a href="buy.html">求购</a></li>
										<li><a href="user.html" style="color: red;">个人中心</a></li>
										<li><a id="logOut">安全退出</a></li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End of Mainmenu-->

		<div style="text-align:center;border-style: solid;padding: 20px;margin-top:15px;margin-left: 300px;margin-right: 350px;">
			<table border="1" cellspacing="1" cellpadding="1" width="800px" style="margin-left:120px;background-color: #defae8;">
				<tr class="inline2">
					<th class="inline2">用户名</th>
					<th class="inline2">密码</th>
					<th class="inline2">性别</th>
					<th class="inline2">个性签名</th>
					<th class="inline2">操作</th>
				</tr>
				<tr class="inline2">
					<td id="username" class="inline2"></td>
					<td id="password" class="inline2"></td>
					<td id="sex" class="inline2"></td>
					<td id="note" class="inline2"></td>
					<td><button id="edit" type="button" class="inline2" style="background-color: #c7fadc;color: black;">修改</button></td>
				</tr>
			</table>

		</div>
		<div style="text-align: center; margin: 15px;">
			<div class="layui-btn" onclick="lay()">我的寄售</div>
			<div class="layui-btn" onclick="lay2()">我的求购</div>
		</div>
		<div class="shop-main-area">
			<div class="container">
				<div class="row" style="text-align: center;">
					<div class="col-md-12">
						<div class="tab-content">
							<div>
								<div class="row" id="view">
								</div>
							</div>

							<br /><br /><br />
						</div>
					</div>
				</div>

				<script id="demo" type="test/html">
					<ul>
			  {{#  layui.each(d.data, function(index, item){ }}
			    <li>
			      <div class="col-md-3 col-sm-3">
			          <div class="single-product-item">
			              <div class="sale-product-label"><span>sale</span></div>
			              <div class="single-product clearfix">
			                  <a href="#">
			                      <span class="product-image">
									  <a href="detail.html?carId={{item.id}}">
			                          <img src= "../images/{{item.picture}}">
									  </a>
			                      </span>
			      			</a>
			                  
			              </div>
			              <h2 class="price"><a href="detail.html?carId={{item.id}}">{{item.brand}} {{item.model}} {{item.color || ''}}</a></h2>
						  <h2 class="single-product-name">{{item.usedTime || '/'}}年&nbsp;{{item.mileage || '/'}}万公里</a></h2>
			              <div class="price-box">
			                  <p class="old-price">
			                      <span class="price">{{item.price*1.25+2.5}}万</span>
			                  </p>
			                  <p class="special-price">
			                      <span class="price">{{item.price}}万</span>
			                  </p> 											
			              </div>
			          </div>
			      </div>
			    </li>
			  {{#  }); }}
			  
			  {{#  if(d.data.length === 0){ }}
			  <div style="color: #00aa00;font-size: 20px;">
			    暂无数据！快去添加吧！
			  </div>
			  {{#  } }} 
			  </ul>
			</script>
				<script id="demo2" type="test/html">
					<ul>
			  {{#  layui.each(d.data, function(index, item){ }}
			    <li>
			      <div class="col-md-3 col-sm-3">
			          <div class="single-product-item">
			              <div class="sale-product-label"><span>sale</span></div>
			              <div class="single-product clearfix">
			                  <a href="#">
			                      <span class="product-image">
									  <a href="buy-detail.html?carId={{item.id}}">
			                          <img src= "../images/{{item.picture}}">
									  </a>
			                      </span>
			      			</a>
			                  
			              </div>
			              <h2 class="price"><a href="buy-detail.html?carId={{item.id}}">{{item.brand}} {{item.model}} {{item.color || ''}}</a></h2>
						  <h2 class="single-product-name">{{item.usedTime || '/'}}年&nbsp;{{item.mileage || '/'}}万公里</a></h2>
			              <div class="price-box">
			                  <p class="old-price">
			                      <span class="price">{{item.price*1.25+2.5}}万</span>
			                  </p>
			                  <p class="special-price">
			                      <span class="price">{{item.price}}万</span>
			                  </p> 											
			              </div>
			          </div>
			      </div>
			    </li>
			  {{#  }); }}
			  
			  {{#  if(d.data.length === 0){ }}
			  <div style="color: #00aa00;font-size: 20px;">
			    暂无数据！快去添加吧！
			  </div>
			  {{#  } }} 
			  </ul>
			</script>

				<script>
					$(document).ready(function() {
						$("tr").mouseover(function() {
							$(this).addClass("over");
						}).mouseout(function() {
							$(this).removeClass("over");
						})
					});
				</script>
				<script>
					var token = document.cookie.split(";")[0];
					var user;

					$.post("http://localhost:8888/usedcar/user/getByToken?token=" + token, token, function(response) {
						if (response != null) {
							$("#user").html(response.username);
							user = response;
						} else {
							$("#user").html("你好");
						}
					});
					console.log(user);
				</script>

				<script>
					var res;
					var user;
					var id;
					var token = document.cookie.split(";")[0];
					$.post("http://localhost:8888/usedcar/user/getByToken?token=" + document.cookie.split(";")[0], function(response) {
						console.log(response.username);
						user = response;
						id = response.id;
						$("#username").append(response.username);
						$("#password").append(response.password);
						$("#sex").append(response.sex == '1' ? '男' : '女');
						$("#note").append(response.note);
					});

					$("#buy").click(function() {
						window.location.href = "buyForm.html";
					});
					console.log(id);

					function lay() {
						layui.use('laytpl', function() {
							laytpl = layui.laytpl;
							$.ajax({
								url: "http://localhost:8888/usedcar/ucInfo/getSellByUserId?token=" + document.cookie.split(
									";")[0],
								type: 'GET',
								dataType: 'json',
								data: {
									userId: user.id
								},
								async: false,
								success: function(response) {
									console.log(response);
									res = response;
									var getTpl = document.getElementById('demo').innerHTML,
										view = document.getElementById('view');
									laytpl(getTpl).render(response, function(html) {
										view.innerHTML = html;
										console.log(html);
									});
								}
							});


						});
					}

					function lay2() {
						layui.use('laytpl', function() {
							laytpl = layui.laytpl;
							$.ajax({
								url: "http://localhost:8888/usedcar/ucInfo/getBuyByUserId?token=" + document.cookie.split(
									";")[0],
								type: 'GET',
								dataType: 'json',
								data: {
									userId: user.id
								},
								async: true,
								success: function(response) {
									console.log(response);
									res = response;

									var getTpl = document.getElementById('demo2').innerHTML,
										view = document.getElementById('view');
									laytpl(getTpl).render(response, function(html) {
										view.innerHTML = html;
									});
								}
							})

						});
					}
				</script>
	</body>
	<script>
		var table;
		$("#edit").click(function() {
			layui.use('table', function() {
				table = layui.table;

				$.post("http://localhost:8888/usedcar/user/getByToken?token=" + document.cookie.split(";")[0], function(
					response) {
					json = JSON.stringify(response);

					layer.open({
						type: 2, //2跳转到页面
						offset: 'auto',
						title: '修改用户信息',
						content: 'front-user-edit.html',
						area: ['1000px', '600px'],
						success: function(layero, index) {
							var body = layer.getChildFrame('body', index); //少了这个是不能从父页面向子页面传值的
							//获取子页面的元素，进行数据渲染
							console.log("行数据id:" + response.id);
							console.log("行数据sex:" + response.sex);
							//console.log(body.html()) //得到iframe页的body内容
							body.contents().find("#id").val(response.id);
							body.contents().find('#username').val(response.username);
							body.contents().find('#password').val(response.password);
							body.contents().find('#phone').val(response.phone);
							body.contents().find('#sex').val(response.sex);
							body.contents().find('#note').val(response.note);
							body.contents().find('#roleId').val(response.role);
							//form.render(); //更新全部     
						},
						yes: function() {
							parent.layer.closeAll();
						},
						end: function() {
							window.location.reload();
						}
					});
				});



			});
		});
	</script>
	<script>

	</script>
</html>
